<template>
  <div class="wrapper">
    <Toast v-if="show" :message="toastMessage" />
    <div class="title">
      <div class="iconfont" @click="handleBackClick">&#xe697;</div>
      新建地址
      <span class="title__save" @click="handleSaveClick"> 保存 </span>
    </div>
    <div class="content">
      <div class="content__item">
        <span class="content__item__label">所在城市：</span>
        <input
          class="content__item__input"
          v-model="city"
          placeholder="请输入所在城市"
        />
      </div>
      <div class="content__item">
        <span class="content__item__label">小区/大厦/学校：</span>
        <input
          class="content__item__input"
          placeholder="请输入小区/大厦/学校"
          v-model="department"
        />
      </div>
      <div class="content__item">
        <span class="content__item__label">楼号-门牌号：</span>
        <input
          class="content__item__input"
          v-model="houseNumber"
          placeholder="请输入楼号-门牌号"
        />
      </div>
      <div class="content__item">
        <span class="content__item__label">收货人：</span>
        <input
          class="content__item__input"
          v-model="name"
          placeholder="请输入收货人"
        />
      </div>
      <div class="content__item">
        <span class="content__item__label">联系电话：</span>
        <input
          class="content__item__input"
          v-model="phone"
          placeholder="请输入联系电话"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
import Toast, { useToastEffect } from "../../components/Toast.vue";

//点击后退逻辑
const useBackRouterEffect = () => {
  const router = useRouter();
  const handleBackClick = () => {
    console.log(231);
    router.back();
  };
  return { router, handleBackClick };
};

export default {
  name: "AddressEdit",
  components: { Toast },
  setup() {
    const route = useRoute();
    const isEdit = route.query.id ? true : false;
    console.log(isEdit);
    if (isEdit) {
      /* axios
        .get("/api/users/address", {
          city: city.value,
          department: department.value,
          houseNumber: houseNumber.value,
          name: name.value,
          phone: phone.value,
        })
        .then((result) => {
          let { data } = result.data;
          if (result.data?.data.errno === 0) {
            router.back();
          }
        }) */
    }
    const city = ref("");
    const department = ref("");
    const houseNumber = ref("");
    const name = ref("");
    const phone = ref("");
    const { show, toastMessage, showToast } = useToastEffect(); //Toast逻辑
    const { handleBackClick } = useBackRouterEffect();
    const handleSaveClick = () => {
      if (
        !city.value ||
        !department.value ||
        !houseNumber.value ||
        !name.value ||
        !phone.value
      ) {
        showToast("所有内容必填");
      } else {
        axios
          .get("/api/users/address", {
            city: city.value,
            department: department.value,
            houseNumber: houseNumber.value,
            name: name.value,
            phone: phone.value,
          })
          .then((result) => {
            let { data } = result.data;
            if (result.data?.data.errno === 0) {
              router.back();
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    };
    return {
      city,
      department,
      houseNumber,
      name,
      phone,
      show,
      toastMessage,
      handleBackClick,
      handleSaveClick,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.wrapper {
  overflow: scroll;
  overflow-y: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: $darkBgColor;
}
.title {
  position: relative;
  @include title;
  .iconfont {
    position: absolute;
    left: 0.1rem;
    width: 0.3rem;
    font-size: 0.24rem;
    color: $search-fontColor;
  }
  &__save {
    position: absolute;
    right: 0.18rem;
    font-size: 0.14rem;
    color: $content-fontcolor;
  }
}
.content {
  margin-top: 0.12rem;
  padding: 0 0.18rem;
  background: $bgColor;
  &__item {
    display: flex;
    overflow: hidden;
    height: 0.44rem;
    line-height: 0.44rem;
    border-bottom: 0.01rem solid $content-bgColor;
    font-size: 0.14rem;
    &__label {
      color: $content-notice-fontcolor;
    }
    &__input {
      flex: 1;
      border: none;
      outline: none;
    }
  }
}
</style>
